<template>
  <div class="article-item">
    <div>
      <div class="title" @click="jumpToDetail(article)">
        {{ article.title }}
        <el-tag type="warning" v-if="article.status == ENUMS.ARTICLE_ENUMS.草稿"
          >草稿</el-tag
        >
        <el-tag type="info" v-if="article.status == ENUMS.ARTICLE_ENUMS.待审核"
          >待审核</el-tag
        >
        <el-tag
          type="danger"
          v-if="article.status == ENUMS.ARTICLE_ENUMS.审核不通过"
          >审核不通过</el-tag
        >
        <!-- <router-link
          :to="{ name: 'articleDetail', params: { id: article.id } }"
          ></router-link
        > -->
        <div
          style="margin-left: auto; display: flex"
          v-if="
            $route.path.includes('/user/profile') &
            (article.authorId == useUserStore().userInfo.id)
          "
        >
          <div
            class="edit"
            @click.stop="$router.push('/article/edit/' + article.id)"
          >
            编辑
          </div>
          <div class="danger" @click.stop="del(article.id)">删除</div>
        </div>
      </div>
      <div class="desc">{{ article.desc }}</div>
      <div class="footer">
        <div class="paid" v-if="article.isPaid">
          <img :src="price" class="icon" />付费
        </div>
        <div>{{ article.authorName }}</div>
        <div><img :src="like" class="icon" />{{ article.likeCount }}</div>
        <div>
          <img :src="read" class="icon" style="width: 24px; height: 24px" />{{
            article.viewCount
          }}
        </div>
        <div>
          <img
            :src="message"
            class="icon"
            style="width: 17px; height: 17px"
          />{{ article.commentCount }}
        </div>
        <div style="margin-left: auto">{{ article.createAt }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import price from "@/assets/price.png";
import like from "@/assets/like.png";
import read from "@/assets/read.png";
import message from "@/assets/message.png";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import ENUMS from "@/utils/Enums";
import { delArticle } from "@/api/article";
import { useUserStore } from "@/stores/userStore";
const router = useRouter();
const del = (id) => {
  ElMessageBox.confirm("是否删除该文章？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 删除文章
      await delArticle(id);
      ElMessage.success("删除成功");
      // 刷新页面
      router.go(0);
    })
    .catch(() => {});
};

const jumpToDetail = (article) => {
  if (article.isPaid) {
    // 付费文章跳转
    ElMessageBox.alert("该文章为付费文章，确定支付？", "提示", {
      confirmButtonText: "确定",
      type: "warning",
    })
      .then(() => {
        ElMessage.success("支付成功");
        // 跳转到文章详情页
        router.push({
          name: "articleDetail",
          params: { id: article.id },
        });
      })
      .catch(() => {
        // 取消支付
        ElMessage.info("已取消支付");
      });
  } else {
    // 免费文章直接跳转
    router.push({
      name: "articleDetail",
      params: { id: article.id },
    });
  }
};
const props = defineProps({
  article: {
    type: {
      id: Number,
      title: String,
      isPaid: Boolean,
      likeCount: Number,
      viewCount: Number,
      commentCount: Number,
      createAt: String,
      desc: String,
      authorName: String,
    },
    required: true,
  },
});
</script>
<style lang="less" scoped>
.title {
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
}
.edit {
  font-size: 16px;
  color: #ec6149;
  font-weight: 400;
}
.danger {
  .edit;
  color: red;
  margin-left: 10px;
}
.desc {
  padding: 20px 0;
  color: #969696;
}
.icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.footer {
  display: flex;
  align-items: center;
  color: #969696;
  gap: 20px;
  .paid {
    color: #ec6149;
  }
  div {
    display: flex;
    align-items: center;
  }
}
</style>
